<!-- eslint-disable no-undef -->
<template>
  <UseDark v-slot="{ isDark }">
    <div
      :class="[
        'page-tabs',
        {
          dark: isDark,
          light: !isDark
        }
      ]"
    >
      <draggable
        class="tab-boxs"
        v-model="tabs"
        v-bind="dragOptions"
        tag="transition-group"
        item-key="id"
        :component-data="{
          tag: 'ul',
          type: 'transition-group'
        }"
      >
        <!-- 页面选项标签 -->
        <template #item="{ element }">
          <li
            :key="'draggable-items-li-' + element.index.toString()"
            :class="[
              'tab-item',
              {
                selected: element.index === currentIndex,
                dark: isDark,
                light: !isDark
              }
            ]"
            @click.stop="($event) => selectTab(element.index)"
            @drop="($event) => selectTab(element.index)"
          >
            <div class="icon-page">
              <jc-icon :name="element.icon" />
            </div>
            <span class="title">{{ element.title }}</span>
            <jc-icon
              @click.stop="($event: MouseEvent) => store.closeTab(element.index)"
              class="icon-close"
              name="window-close"
            />
          </li>
        </template>
        <!-- 新增标签 -->
        <template #footer>
          <li class="add-bnt" @click="($event) => startNewTab()" key="noDraggable">
            <jc-icon name="symbol-add-bold" />
          </li>
        </template>
      </draggable>

      <!-- 窗口控制工具 -->
      <ul class="window-ctrls">
        <li class="bt" @click.stop="windowMin">
          <jc-icon name="window-min" />
        </li>
        <li class="bt" @click.stop="windowToggle">
          <jc-icon :name="windowSizeIcon" />
        </li>
        <li class="close-bt" @click.stop="windowHide">
          <jc-icon name="window-close" />
        </li>
      </ul>
    </div>
  </UseDark>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import draggable from 'vuedraggable'
import UseDark from '@/apps/dark/UseDark.vue'
import { useTabStore } from '@/apps/pages/stores/tabs'
import type { BrowserWindow } from 'electron'


const windowSizeIcon = ref<'window-max' | 'window-middle'>('window-max')
const  browserWindow = ref<number|null>(null);
const ipcRenderer = (window as any).electronApi.ipcRenderer;

// 发送请求获取当前窗口对象
ipcRenderer.send('get-main-window');

// 接收主进程返回的当前窗口对象
ipcRenderer.on('main-window', (event: any, windowID: number) => {
  browserWindow.value = windowID;
});

/**返回当前窗口实例 */
function _getCurrentWindowID():number {
  return browserWindow.value as number;
}

function windowSet(type:'hide'|'close'|'maximize'|'restore'|'minimize') {
  const id = _getCurrentWindowID()
  ipcRenderer.send('ipc-window-manager-by-id', {
    action: type,
    id: id
  })
}

/**窗口关闭 */
function windowClose() {
  windowSet('close')
}


function windowHide() {
  windowSet('hide')
}

function windowRestore() {
  windowSet('restore')
}

function windowMaximize() {
  windowSet('maximize')
}

function windowMinimize() {
  windowSet('minimize')
}

/**窗口的最大化和还原的切换 */
function windowToggle() {
  if (windowSizeIcon.value === 'window-max') {
    windowMaximize()
    windowSizeIcon.value = 'window-middle'
  } else {
    windowRestore()
    windowSizeIcon.value = 'window-max'
  }
}

/**最小化窗口 */
function windowMin() {
  windowMinimize()
}




// const remote = require('@electron/remote');
// const remote = (window as any).remote;




const store = useTabStore()
const { tabs, currentIndex } = storeToRefs(store)
const router = useRouter()

const dragOptions = computed(() => {
  return {
    animation: 200,
    group: 'description',
    disabled: false,
    ghostClass: 'ghost'
  }
})

const selectTab = (index: number) => {
  const url: string | null = store.select(index) // 若为 null，表示标签集为空
  //
  if (url) {
    // 非完成 url
    if (!/^https?:\/\/.*$/.test(url)) {
      router.push(url)
    }
    // 以完整 url 形式给出的
    // 视为外部站点，使用 iframe 中打开
    else {
      console.log(url)
    }
  }
  // window.location.href = url
}



/**打开新的 tab */
function startNewTab() {
  store.appendTab({
    title: '新标签页',
    url: '/welcome',
    icon: ''
  })
}


</script>

<style lang="scss">
.page-tabs {
  position: relative;
  width: 100%;
  min-height: 39px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  -webkit-app-region: drag;
  // 标签盒子 dark 主题
  &.dark {
    background-color: rgb(80, 80, 80);
  }

  // 标签盒子 light 主题
  &.light {
    background-color: #e8f9f1;
  }

  // 标签盒子列表
  $size: 30px;
  ul.tab-boxs {
    height: $size;
    min-height: $size;
    max-height: $size;
    width: 0;
    flex: 1;
    /* padding-top: 3px; */
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;

    // 页面标签项
    li.tab-item {
      list-style: none;
      -webkit-app-region: no-drag;
      height: $size;
      width: 160px;
      min-width: 46px;
      user-select: none;
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      padding-left: 9px;
      /* margin-left: 3px; */
      // 页面标签项 - light 主题

      &.light {
        border-right: silver solid 1px;
        &:hover {
          background-color: #f1f1f1;
          box-shadow: inset 0 -1em 1em rgba(0, 0, 0, 0.1), 0 0 0 0 rgb(173, 173, 173),
            0.1em 0.1em 1em rgba(159, 159, 159, 0.3);
        }

        // 标签被鼠标激活时
        &:active {
          background-color: rgb(211, 167, 109);
        }

        // 被选中的当前标签
        &.selected {
          filter: grayscale(0);
          border-top: #2c5dff solid 2px;
          background-color: #ffffff;
        }

        .icon-close {
          color: #5a5a5a;
          &:hover {
            background-color: rgb(181, 181, 181);
          }

          &:active {
            color: #ffffff;
            background-color: rgb(88, 88, 88);
          }
        }
      }

      // 页面标签项 - dark 主题
      &.dark {
        color: #acacac;
        border-right: rgb(85, 85, 85) solid 1px;

        &:hover {
          color: #ffffff;
          background-color: #000000;
          box-shadow: inset 0 -1em 1em rgba(119, 119, 119, 0.1), 0 0 0 0 rgb(223, 223, 223),
            0.1em 0.1em 1em rgba(185, 185, 185, 0.3);
        }

        // 标签被鼠标激活时
        &:active {
          background-color: rgb(0, 110, 179);
        }

        // 被选中的当前标签
        &.selected {
          color: #ffffff;
          border-top: #2c5dff solid 2px;
          background-color: #000000;
        }

        .icon-close {
          color: #afafaf;
          &:hover {
            color: #ffffff;
            background-color: rgb(70, 70, 70);
          }

          &:active {
            color: #ffffff;
            background-color: rgb(88, 88, 88);
          }
        }
      }

      // 页面标签的图标
      .icon-page {
        height: $size;
        padding: 0 7px 0 0;
        display: grid;
        place-items: center;
        font-size: 17px;
      }

      span.title {
        width: 0;
        flex: 1;
        font-size: 13px;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      // 每个标签上的关闭按钮
      .icon-close {
        border-radius: 3px;
        right: 0;
        padding: 4px;
        margin: 4px;
        display: inline-flex;
        align-items: center;
        font-size: 12px;
        text-align: center;
        transform: scale(0.7); // 缩小按钮尺度
      }
    }

    // 新页面标签按钮
    li.add-bnt {
      -webkit-app-region: no-drag;
      list-style: none;
      cursor: pointer;
      margin-left: 3px;
      height: 22px;
      min-width: 22px;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      scale: 0.8;

      &:hover {
        background-color: rgb(204, 204, 204);
      }
    }
  }

  // 窗口控制工具集（最小最大化还原关闭）
  ul.window-ctrls {
    width: 108px;
    max-width: 108px;
    min-width: 108px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    li {
      -webkit-app-region: no-drag;
      cursor: pointer;
      height: 100%;
      width: 36px;
      min-width: 36px;
      max-width: 36px;
      color: #979797;
      list-style: none;
      display: grid;
      place-items: center;
      float: right;

      span {
        // 调整字体大小
        transform: scale(0.9);
      }

      &.bt {
        &:hover {
          color: #ffffff;
          background-color: rgb(133, 133, 133);
        }
      }

      // 关闭窗口
      &.close-bt {
        font-size: small;

        &:hover {
          color: #ffffff;
          background-color: red;
        }
      }
    }
  }
}
</style>
